<template>
  <div class="allpage">
    <el-form
      :inline="true"
      :model="formInline"
      ref="formInline"
      class="form-style"
      style="padding-top:20px"
    >
      <el-row style="border-bottom:1px solid #eeeeee">
        <el-col>
          <el-form-item prop="goods" style="margin-left:30px">
            <el-input v-model="formInline.goods" placeholder="商品名称"></el-input>
          </el-form-item>
          <el-form-item prop="time" style="margin-left:30px">
            <el-date-picker
              type="date"
              v-model="formInline.time"
              @change="getSTime"
              placeholder="发布日期"
              value-format="yyyy-MM-dd"
              class="input"
            ></el-date-picker>
          </el-form-item>
          <el-form-item prop="region" style="margin-left:30px">
            <el-select v-model="formInline.region" placeholder="选择供应商">
              <el-option v-for="(item,index) in options" :key="index" :label="item.SupplierName" :value="item.SupplierId"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item style="margin-left:30px">
            <el-button icon="el-icon-refresh" type="warning" @click="clean('formInline')">重置</el-button>
            <el-button icon="el-icon-search" type="primary" @click="search">查询</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <div class="mantop-bot">
            <el-button type="success" class="btn" size="medium" @click="edit('add')">添加商品</el-button>
            <el-button
              type="info"
              class="btn"
              size="medium"
              @click="delChoose(multipleSelection)"
              :disabled="this.multipleSelection.length === 0"
            >批量删除</el-button>
          </div>
        </el-col>
      </el-row>
    </el-form>

    <div class="table-style">
      <el-table
        class="manbot"
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
        :formData="tableData"
      >
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="ProductNumber" label="商品编号"></el-table-column>
        <el-table-column label="商品" width="300">
          <template slot-scope="scope">
            <div class="goods-man">
              <div class="goods-man-top" style="overflow:hidden">
                <div
                  class="goods-man-top-a"
                  v-for="(item,index) in scope.row.ProductPhoto"
                  :key="index"
                >
                  <el-image
                    v-image-preview
                    style="width: 70px; height: 70px"
                    :src="item"
                    class="goods-man-top-a-img"
                  ></el-image>
                </div>
              </div>
              <div class="goods-man-bot">
                <div>{{scope.row.ProductName}}</div>
                <div>${{scope.row.MinPrice}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="CostPrice" label="成本价"></el-table-column>
        <!-- <el-table-column prop="Weight" label="单价" width="80">
        <template slot-scope="scope">
          <span style="color:red">￥{{scope.row.Weight}}</span>
        </template>
        </el-table-column>-->
        <el-table-column label="团购价">
          <template slot-scope="scope">
            <span style="color:red">￥{{scope.row.CurrentPrice}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="SoloProductModels" label="商品规格" width="130">
          <template slot-scope="scope">
            <div
              style="display: -webkit-box;-webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;"
            >{{scope.row.SoloProductModels}}</div>
          </template>
        </el-table-column>
        <el-table-column prop="SupplierName" label="供应商">
          <template slot-scope="scope">
            <p v-if="scope.row.SupplierName ===''" style="color:red">此商品无供应商</p>
            <p v-else>{{scope.row.SupplierName}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="CreateTime" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit('edit',scope.row.ProductNumber)">编辑</el-button>
            <el-button type="danger" size="mini" @click="del(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <botpage
        class="botpage-style"
        :currentPage="currentPage"
        :PageSize="PageSize"
        :total="total"
        @handleCurrentChange="currentChange"
        @handleSizeChange="pageSizeChange"
      />
    </div>
  </div>
</template>

<script>
import Botpage from "@/components/botpage/Botpage";
import { ProductsApi, DeleteProduct, DeleteListProduct, LoadSuppliers } from "@/request/api";
export default {
  data() {
    return {
      options:[],
      formInline: {},
      tableData: [],
      currentPage: 1,
      PageSize: 10,
      total: 1,
      multipleSelection: [],
    };
  },
  components: {
    Botpage,
  },
  created() {
    this.getTableData();
    this.getSelect()
  },
  methods: {
    //表格多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
      console.log(this.multipleSelection)
    },
    //多选删除
    delChoose() {
      let ids = this.multipleSelection.map((item) => item.ProductNumber).join("|");
      console.log(ids);
      this.$confirm("此操作将永久删除您选择多项的商品, 是否继续?", {}).then((res) => {
        DeleteListProduct({
          ProductNumber: ids,
        })
          .then((res) => {
            if (res.StatusCode === 200 ) {
              this.getTableData();
              this.$confirm("该条信息删除成功！", "删除成功", {});
            }
          })
          .catch((err) => {
            console.log(err);
          });
      });
    },
    //select框
    getSelect() {
      LoadSuppliers().then( res => { 
        this.options = res.Data
      }).catch( err => {
        console.log(err)
      })
    },
    //表格数据获取
    getTableData() {
      ProductsApi({
        PageIndex: this.currentPage,
        PageSize: this.PageSize,
        OS: "PC",
        CustomerId: 1,
        SreachValues: this.formInline.goods,
        StartTime : this.formInline.time,
        SupplierId : this.formInline.region
      })
        .then((res) => {
          this.tableData = res.Data;
          //处理数据排序
          this._initTableDataSort(res.Data);
          this.currentPage = res.PageIndexs;
          this.PageSize = res.PageCount;
          this.total = res.DataCounts;
          var that = this;
          for (let i in that.tableData) {
            that.tableData[i].ProductPhoto = that.tableData[i].ProductPhoto.split("|");
          };
          console.log("====tableData=====", that.tableData);
         for (let j in this.tableData) {
           that.tableData[j].CreateTime = this.tableData[j].CreateTime.replace(/(\/)/g,'-');

         }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // 参数化查询 '(@ProductNumber nvarchar(4000))select * from SU_Products pro le' 需要参数 '@ProductNumber'，但未提供该参数。
    async edit(type, id) {
      console.log(id);
      console.log(type);
      this.$router.push({
        path: "/management/addmanagement",
        query: { ProductNumber: id, type: type },
      });
    },
    //删除
    del(row) {
      if (row.ProductNumber) {
        this.$confirm("是否要删除该条信息?", "删除提示", {}).then((res) => {
          DeleteProduct({
            ProductNumber: row.ProductNumber,
          }).then((res) => {
            if (res.StatusCode === 200 ) {
              this.getTableData();
              this.$confirm("该条信息删除成功！", "删除成功", {});
            }
          })
          .catch(err => {
            console.log(err)
          })
        });
      }
    },
    //清空
    clean(formInline) {
      this.$refs[formInline].resetFields();
      this.getTableData()
    },
    //搜索
    search(row) {
      this.getTableData();
    },
    currentChange(event) {
      this.currentPage = event;
      this.getTableData();
    },
    pageSizeChange(event) {
      this.PageSize = event;
      this.getTableData();
    },
    //处理表格数据排序
    _initTableDataSort(data) {
      this.tableData = this.bubbleSort(data);
      console.log(this.tableData);
      this.tableData.forEach((item, i) => {
        // console.log(item.PId)
      });
    },
    bubbleSort(array) {
      var len = array.length;
      for (var i = len; i > 0; i--) {
        for (var j = 0; j < i - 1; j++) {
          if (array[j].PId < array[j + 1].PId) {
            this.reverse(array, j, j + 1);
          }
        }
      }
      return array;
    },
    getSTime(val) {
      this.ruleForm.time = val;
    },
    reverse(arr, inx, iny) {
      var temp = arr[inx];
      arr[inx] = arr[iny];
      arr[iny] = temp;
    },
  },
};
</script>

<style lang="less" scoped>
.mantop-bot {
  margin: 10px auto;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  padding-left: 20px;
}
.manbot {
  // margin-top: 30px;
  .goods-man {
    display: flex;
    width: 100%;
    .goods-man-top {
      display: flex;
      flex: 1;
      .goods-man-top-a {
        overflow: hidden;
        .goods-man-top-a-img {
          text-overflow: ellipsis;
          overflow: hidden;
          white-space: nowrap;
        }
      }
    }
    .goods-man-bot {
      overflow: hidden;
      display: flex;
      flex-direction: column;
      flex: 1;
      :first-child {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        flex: 1;
      }
      :nth-child(2) {
        color: red;
        flex: 1;
      }
    }
  }
}
</style>